<template>
  <view class="container">
		<nav-ber :title="'问卷详情'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="font_wi">
			铝镁匹林片（2）医师调研问卷
		</view>
		<u-divider></u-divider>
		<view class="province">
			<view class="pro_mar" v-for="(item, indexs) in listData" :key="indexs">
				<view class="text_color">
					{{ item.text }}
				</view>
				<view v-if="item.type == 1">
					 <u-radio-group
						v-model="item.modexz"
						placement="column"
						@change="groupChange"
						>
						<u-radio
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in item.list"
							shape="square"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-radio>
					</u-radio-group>
				</view>
				<view v-if="item.type == 2">
						<u-checkbox-group
						 v-model="item.modexz"
						 placement="column"
						 @change="checkboxChange"
						 >
							 <u-checkbox
								 :customStyle="{marginBottom: '8px'}"
								 v-for="(item, index) in item.list"
								 :key="index"
								 :label="item.name"
								 :name="item.name"
							 >
							 </u-checkbox>
						</u-checkbox-group>
				</view>
			</view>
		</view>
  </view>
</template>
<script>
  export default {
    data() {
			return {
				listData: [
					{
						text: '1、您了解铝镁匹片（II）的途径有哪些？（单选）',
						type: 1,
						modexz:'',
						list:[
							{
								name: '苹果',
								disabled: false
							},
							{
								name: '香蕉',
								disabled: false
							},
							{
								name: '橙子',
								disabled: false
							}, {
								name: '榴莲',
								disabled: false
							}
						]
					},
					{
						text: '1、您了解铝镁匹片（II）的途径有哪些？（多选）',
						type: 2,
						modexz: [],
						list:[
							{
								name: '苹果',
								disabled: false
							},
							{
								name: '香蕉',
								disabled: false
							},
							{
								name: '橙子',
								disabled: false
							}, {
								name: '榴莲',
								disabled: false
							}
						]
					},
					{
						text: '1、您了解铝镁匹片（II）的途径有哪些？（多选）',
						type: 2,
						modexz: [],
						list:[
							{
								name: '苹果',
								disabled: false
							},
							{
								name: '香蕉',
								disabled: false
							},
							{
								name: '橙子',
								disabled: false
							}, {
								name: '榴莲',
								disabled: false
							}
						]
					},{
						text: '1、您了解铝镁匹片（II）的途径有哪些？（多选）',
						type: 2,
						modexz: [],
						list:[
							{
								name: '苹果',
								disabled: false
							},
							{
								name: '香蕉',
								disabled: false
							},
							{
								name: '橙子',
								disabled: false
							}, {
								name: '榴莲',
								disabled: false
							}
						]
					},
					{
						text: '1、您了解铝镁匹片（II）的途径有哪些？（多选）',
						type: 2,
						modexz: [],
						list:[
							{
								name: '苹果',
								disabled: false
							},
							{
								name: '香蕉',
								disabled: false
							},
							{
								name: '橙子',
								disabled: false
							}, {
								name: '榴莲',
								disabled: false
							}
						]
					}
				],
			}
    },
		methods: {
			groupChange() {
				console.log('groupChange112', this.listData);
				
			},
			checkboxChange() {
				console.log('1245125', this.listData);
				
			},
		},
		mounted() {},
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.font_wi {
		font-weight: 900;
		text-align: center;
		margin-top: 20rpx;
		font-size: 36rpx;
	}
	.text_color {
		font-weight: 600;
		color: #111;
		margin-bottom: 20rpx;
	}
	.pro_mar {
		margin-bottom: 40rpx;
	}
</style>
